<template>
    <div class="w100 flrc mu-form-item">
        <div class="padr5" v-if="config.inputPosition !== 'left'">
            <mu-chip color="primary" delete @delete="remove(item)" v-for="item in selectedItem" :key="item.value">{{item.label}}</mu-chip>
        </div>
        <div :class="{flex1:config.inputPosition !== 'left'}">
            <mu-text-field @keydown.enter="search" @change="search" @input="search" @focus="open = true" v-model="searchKey" placeholder="请选择" ref="show" action-icon="search" :action-click="()=>{open = !open}"></mu-text-field>
            <mu-popover :open.sync="open" :trigger="trigger">
                <div>
                    <div class="">
                        <mu-list>
                            <mu-list-item @click="select(row)" button v-for="row in choices" :key="row.value">{{row.label}}</mu-list-item>
                        </mu-list>
                    </div>
                    <div class="bdtso tar flrc">
                        <mu-button small @click="lastPage" icon :disabled="query.page === 1">
                            <mu-icon value="skip_previous"></mu-icon>
                        </mu-button>
                        <div class="flex1 tac">
                            查询结果：{{query.total}}条
                        </div>
                        <mu-button small @click="nextPage" icon :disabled="query.page * query.limit >= query.total">
                            <mu-icon value="skip_next"></mu-icon>
                        </mu-button>
                    </div>
                </div>
            </mu-popover>
        </div>
        <div class="flex1 padr5" v-if="config.inputPosition === 'left'">
            <mu-chip color="primary" delete @delete="remove(item)" v-for="item in selectedItem" :key="item.value">{{item.label}}</mu-chip>
        </div>
    </div>
</template>

<script>
    export default {
        name: "EzSearch",
        props: {
            value: {},
            config: {}
        },
        data() {
            return {
                choices: [],
                open: false,
                trigger: null,

                inSideValue: 0,
                searchKey: "",
                selectedId:[],
                selectedItem:[],
                query:{
                    page:1,
                    limit:10,
                    total:0
                }
            }
        },
        mounted() {
            this.trigger = this.$refs.show.$el

            if (this.config.isMultiple){
                this.selectedId = this.value === null?[]:this.value
            }else {
                this.selectedId = this.value === null?[]:[this.value]
            }

            this.inSideValue = this.value
            this.query.page = this.config.apiPage
            this.query.limit = this.config.apiLimit<0?5:this.config.apiLimit

            this.prepareData()
        },
        methods: {
            lastPage(){
                this.query.page--
                this.search(this.searchKey)
            },
            nextPage(){
                this.query.page++
                this.search(this.searchKey)
            },
            remove(item){
                this.selectedId = this.$utils.arrayDelValue(this.selectedId,item.value)
                this.prepareData()
            },
            search(){
                let where  = this.config.apiWhere
                if (this.config.apiSearchKeys.length > 0){
                    let searches=[]
                    for (let apiSearchKey of this.config.apiSearchKeys) {
                        let toAdd = {}
                        toAdd[apiSearchKey] = this.searchKey
                        searches.push(toAdd)
                    }
                    where["_or"] = searches
                }
                this.$http.post(this.config.api, {
                    _where:where,
                    _order:this.config.apiOrder,
                    page:this.query.page,
                    limit:this.query.limit,
                }, res => {
                    this.choices = res.data.lists
                    this.query = res.data.query
                })
            },
            select(row){
                let find = false
                for (let id of this.selectedId) {
                    if (row.value === id){
                        find = true
                    }
                }
                if (find){
                    this.selectedId = this.$utils.arrayDelValue(this.selectedId,row.value)
                }else {
                    if (this.config.isMultiple){
                        this.selectedId.push(row.value)
                    }else {
                        this.selectedId = [row.value]
                    }
                }
                this.prepareData()
            },
            prepareData(){
                if (this.selectedId === undefined)return;
                if (this.selectedId.length === 0 ){
                    this.selectedItem = []
                    return
                }
                if (this.selectedId.length === 1 && !this.selectedId[0]){
                    this.selectedItem = []
                    return
                }
                this.$http.post(this.config.api, {
                    _where: {
                        id__in:this.selectedId
                    },
                    _order:this.config.apiOrder,
                    page:1,
                    limit:0,
                }, res => {
                    this.selectedItem = res.data.lists
                })
            }
        },
        watch: {
            selectedId(val) {
                if (this.config.isMultiple){
                    this.$emit("input", val)
                }else {
                    if (this.selectedId.length > 0){
                        this.$emit("input", this.selectedId[0])
                    }else {
                        this.$emit("input", null)
                    }
                }
            },
            open(v){
                if (v){
                    this.search(this.searchKey)
                }
            }
        },
    }
</script>

<style scoped>

</style>